import './App.css'
import { useEffect, useState } from 'react';
import { BrowserRouter, Routes, Route, Link, Navigate } from 'react-router-dom';
import useStore from '@/store';

import LoginPage from '@/pages/LoginPage.jsx'
import Home from '@/pages/Home.jsx'
import NewChatPage from '@/pages/ChatArea/NewChatPage'
import ChatPage from '@/pages/ChatArea/ChatPage'



const useDeviceType = () => {
  // const isMobileView = useStore(state => state.isMobileView);
  const setIsMobileView = useStore(state => state.setIsMobileView);

  const handleResize = () => {
    setIsMobileView(window.innerWidth <= 768);
  };

  useEffect(() => {
    handleResize(); // 初始判断
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // return isMobileView;
};


const ProtectedRoute = ({ children }) => {
  const isAuthenticated = !!localStorage.getItem('token');

  if (!isAuthenticated) {
    return <Navigate to="/auth" />;
  }

  return children;
};


function App() {
  useDeviceType();

  // console.log(currentInnerHeight);

  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/auth" element={<LoginPage />} />
          <Route path="/" element={<ProtectedRoute><Home /></ProtectedRoute>} >
            <Route index element={<NewChatPage />} /> {/* 默认子路由 */}
            <Route path="c/:uuid" element={<ChatPage />} />
          </ Route>
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </BrowserRouter>
    </>
  )
}


export default App
